@charset "utf-8";
html,
body {
  background: #f3f3f3;
}
.header {
  width: 100%;
  background: #1794eb;
  position: relative;
}
.header .back {
  width: 0.5rem;
  height: 0.82rem;
  position: absolute;
  left: 0;
  top: 0;
  background: url("../images/back_83fc77e.png") no-repeat center;
  background-size: 0.22rem 0.38rem;
}
.header .back a {
  display: block;
  width: 100%;
  height: 100%;
}
.header .username {
  text-align: center;
  color: #fff;
  line-height: 0.82rem;
  font-size: 0.3rem;
}
.header-bd {
  padding: 0.2rem 0;
}
.header-bd-l {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.header-bd-l img {
  width: 100%;
  height: 100%;
}
.header-bd-r ul li {
  text-align: center;
  border-right: 1px #ffffff solid;
}
.header-bd-r ul li.last {
  border-right: none;
}
.header-bd-r ul li p {
  color: #fff;
}
.header-bd-r ul li .p1 {
  font-size: 0.26rem;
}
.header-bd-r ul li .p2 {
  font-size: 0.2rem;
}
.submenu {
  height: 0.94rem;
  background: #fafafa;
  margin-top: 0.26rem;
}
.submenu ul li p {
  width: 1.2rem;
  height: 0.94rem;
  font-size: 0.26rem;
  line-height: 0.94rem;
  margin: 0 auto;
  padding-left: 0.4rem;
  position: relative;
}
.submenu ul li p a {
  display: block;
}
.submenu ul li .submenu-item1 {
  background: url("../images/data_statistics-icon1_act_e50155b.png") no-repeat left center;
  background-size: 0.32rem 0.32rem;
}
.submenu ul li .submenu-item1:after {
  content: "";
  width: 100%;
  height: 0.06rem;
  background: #1794eb;
  position: absolute;
  bottom: -0.03rem;
  left: 0;
  z-index: 90;
}
.submenu ul li .submenu-item2 {
  background: url("../images/data_statistics-icon2_645c537.png") no-repeat left center;
  background-size: 0.29rem 0.32rem;
}
.submenu ul li .submenu-item3 {
  background: url("../images/data_statistics-icon3_21086dd.png") no-repeat left center;
  background-size: 0.30rem 0.28rem;
}
.main {
  padding-top: 0.26rem;
}
.main-box-n1 {
  padding: 0 0.18rem;
  color: #999999;
}
.main-box-n1 .hd {
  font-size: 0.22rem;
  padding: 0.2rem 0.1rem 0.3rem;
  background: #fff;
}
.main-box-n1 .select {
  padding: 0 0.2rem;
  background: #fff;
}
.main-box-n1 .select select {
  font-size: 0.24rem;
  border: none;
  outline: none;
  background: none;
  margin-top: 0.1rem;
}
.main-box-n1 .select-box {
  height: 0.54rem;
  background: #f3f3f3;
}
.main-box-n1 .bd {
  background: #fff;
  padding: 0.36rem 0 0.16rem;
}
.main-box-n1 .pillar-items {
  /* width: 0.42rem; */
}
.main-box-n1 .pillar-item {
  width: 0.42rem;
  height: 2.42rem;
}
.main-box-n1 .pillar-item .com-pillar {
  position: absolute;
  width: 100%;
  height: 50%;
}
.main-box-n1 .pillar-item .rise {
  bottom: 0;
  background: #ff6666;
}
.main-box-n1 .pillar-item .fall {
  top: 0;
  background: #40f16f;
}
.main-box-n1 .pillar-item .tip {
  display: none;
  position: absolute;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  box-shadow: 0.01rem 0.04rem rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0.01rem 0.04rem rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0.01rem 0.04rem rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0.01rem 0.04rem rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0.01rem 0.04rem rgba(0, 0, 0, 0.2);
  width: 1rem;
  height: 0.84rem;
  border-radius: 0.08rem;
  font-size: 0.24rem;
  color: #000;
  background: #fff;
  text-align: center;
}
.main-box-n1 .pillar-item .tip p {
  margin-top: 0.12rem;
}
.main-box-n1 .pillar-item .tip span {
  margin-top: 0.08rem;
  color: #ff6666;
}
.main-box-n1 .pillar-item .top_50 {
  background: #ffe5e5;
}
.main-box-n1 .pillar-item .top_50 .rise {
  background: #ff6666;
}
.main-box-n1 .pillar-item .top_50 .tip {
  bottom: 0.3rem;
}
.main-box-n1 .pillar-item .top_50 .tip .triangle-down {
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.15rem solid transparent;
  border-right: 0.15rem solid transparent;
  border-top: 0.15rem solid #fff;
}
.main-box-n1 .pillar-item .bottom_50 {
  background: #d4f6dd;
}
.main-box-n1 .pillar-item .bottom_50 .fall {
  background: #40f16f;
}
.main-box-n1 .pillar-item .bottom_50 .tip {
  bottom: 0.1rem;
}
.main-box-n1 .pillar-item .bottom_50 .tip .triangle-down {
  position: absolute;
  left: 50%;
  top: -0.14rem;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.15rem solid transparent;
  border-right: 0.15rem solid transparent;
  border-bottom: 0.15rem solid #fff;
}
.main-box-n1 .pillar-item .bottom_50 .tip span {
  color: #40f16f;
}
.main-box-n1 .pillar-item .top_50,
.main-box-n1 .pillar-item .bottom_50 {
  height: 50%;
  position: relative;
}
.main-box-n1 .month {
  font-size: 0.16rem;
  text-align: center;
}
.main-box-n1 .ft {
  padding: 0.3rem 0.24rem;
}
.main-box-n1 .ft .tips {
  width: 4.4rem;
  margin: 0 auto;
  padding-left: 0.4rem;
  text-align: center;
  font-size: 0.18rem;
  line-height: 0.3rem;
  background: url("../images/tips_4a165ae.png") no-repeat left 0.02rem;
  background-size: 0.28rem 0.28rem;
}
.sj-item {
  height: 1.16rem;
  background: #fff;
  margin-bottom: 0.04rem;
}
.sj-item .flex-cont {
  height: 100%;
}
.sj-item .flex-cont p {
  font-size: 0.28rem;
  text-align: center;
}
.sj-item .flex-cont span {
  display: block;
  font-size: 0.2rem;
}
.main-box-n3 .hd {
  padding-top: 0.24rem;
}
.main-box-n3 .hd p {
  float: left;
  color: #333333;
  padding: 0 0.16rem;
  line-height: 0.44rem;
  font-size: 0.3rem;
}
.main-box-n3 .hd select {
  width: 1.74rem;
  height: 0.44rem;
  font-size: 0.24rem;
  border: 1px #999999 solid;
  border-radius: 0.04rem;
  outline: none;
}
#main {
  width: 100%;
  height: 7.0rem;
}
.percent {
  height: 1.14rem;
  border-bottom: 1px #bfbfbf solid;
}
.percent-items {
  padding-bottom: 1.04rem;
}
.percent-name {
  width: 1.9rem;
  text-align: center;
  font-size: 0.26rem;
  color: #000;
}
.percent-center {
  width: 3.2rem;
}
.percent-center .rise {
  width: 50%;
  height: 0.11rem;
  background: #ff0000;
}
.percent-center .fall {
  width: 50%;
  height: 0.11rem;
  background: #06bb5f;
}
.percent-text {
  margin-left: 0.34rem;
  font-size: 0.24rem;
}
.percent-text .rise {
  color: #ff0000;
}
.percent-text .fall {
  color: #06bb5f;
}
.copy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.04rem;
  line-height: 1.04rem;
  font-size: 0.36rem;
  text-align: center;
  color: #000;
  background-color: rgba(23, 148, 235, 0.9);
}
